var OrderInfoSettingDialog = function () {
  var template = /* html */ `
    <div class="order-info-setting-dialog">
      <div class="order-info-dialog-btns">
        <el-button size="medium" type="primary" @click="addItem">新增显示项</el-button>
        <el-button size="medium" type="primary" @click="ensure">保存</el-button>
      </div>
      <div class="order-info-dialog-content">
        <form-group group-title="布局" style="margin-bottom:10px">
          <div class="order-info-layout" style="margin-right:20px">
            <span>横向放置数量：</span>
            <el-input-number v-model="colNum" size="mini" :controls="false" :min="1" :precision="0"></el-input-number>
          </div>
          <div class="order-info-layout">
            <span>纵向放置数量：</span>
            <el-input-number v-model="rowNum" size="mini" :controls="false" :min="1" :precision="0"></el-input-number>
          </div>
        </form-group>

        <form-group group-title="设置显示项">
          <template v-for="(fieldObj,index) in fieldList">
          <div class="order-info-col-item clearfix" :key="'item_'+fieldObj.field">
            <div class="item-index" style="width:60px;margin-right:10px">第{{index+1}}项:</div>
            <div style="margin-right:10px">
              <el-select filterable v-model="fieldObj.field" size="mini" style="width:180px">
                <el-option v-for="item in allFields" :key="'field_'+item.field" :value="item.field" :label="item.label">
                </el-option>
              </el-select>
            </div>
            <div v-if="fieldList.length>1">
              <el-button size="mini" type="danger" @click="delItem(index)">删除显示项</el-button>
            </div>
          </div>
          </template>
        </form-group>
      </div>
    </div>
  `;

  return {
    props: {
      config: {
        type: Object,
        required: true
      }
    },

    data: function () {
      var orderInfo = this.config.orderInfo;
      var fieldList = orderInfo.fieldList;
      fieldList = _.map(fieldList, function (obj) {
        return {
          field: obj.field
        }
      });
      return {
        rowNum: orderInfo.rowNum,
        colNum: orderInfo.colNum,
        fieldList: _.cloneDeep(fieldList),
        allFields: orderInfo.getAllOrderFields()
      };
    },

    methods: {
      addItem: function () {
        var fieldList = this.fieldList;
        fieldList.push({
          field: ''
        });
      },

      delItem: function (index) {
        var fieldList = this.fieldList;
        fieldList.splice(index, 1);
      },

      ensure: function () {
        var fieldList = this.fieldList;
        for (var i = 0; i < fieldList.length; i++) {
          if (fieldList[i].field === '') {
            this.$alert(`请选择第${i+1}项显示内容`);
            return;
          }
        }

        var rowNum = this.rowNum;
        var colNum = this.colNum;
        var count = rowNum * colNum;
        if (fieldList.length > count) {
          this.$alert(`设置的显示项超出最大可显示项数${count}`);
          return;
        }

        var obj = _.find(fieldList, {
          field:'proDept'
        });
        if (obj === undefined) {
          this.$alert('必须设置生产部门显示项');
          return;
        }

        var list = _.uniqBy(fieldList, 'field');
        if (list.length !== fieldList.length) {
          this.$alert('设置的显示项有重复');
          return;
        }
        this.config.orderInfo.resetData({
          fieldList: fieldList,
          rowNum: rowNum,
          colNum: colNum
        });
        this.$emit('setting-success');
      }
    },

    components: {
      FormGroup: FormGroup
    },

    template: template
  };
}();
